<template>
  <div id="tmpl">
    <div id="postcomment" class="postCom">
      <h3>提交评论</h3>
      <p></p>
      <textarea placeholder="请输入评价内容" v-model="postcontent"></textarea>
      <button @click="postcomment">提交</button>
    </div>

    <div id="list" class="list">
      <h3>评论列表</h3>
      <p></p>
      <div class="lists">
        <dl v-for="(item, index) in list">
          <dt>
            <span>第{{index + 1}}楼</span>
            <span>用户：{{item.user_name}}</span>
            <span>发表时间：{{item.add_time}}</span>
          </dt>
          <dd>{{item.content}}</dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import common from '../../kits/common.js';
  export default {
    data() {
      return {
        postcontent: '',
        list: [],
        pageindex: 1
      }
    },
    props: ["id"],
    created() {
      this.getcommentlist(this.pageindex);
    },
    methods: {
      postcomment() {
        if(this.postcontent.trim().length == 0) {
          return;
        }
        var url = common.apidomain + '/api/postcomment/' + this.id;

        this.$http.post(url, {content: this.postcontent}, {emulateJSON:true}).then(function(res) {
          Toast(res.body.message);
          this.postcontent = '';
        })
      },
      getcommentlist(pageindex) {

        pageindex = pageindex || 1;

        var url = common.apidomain + '/api/getcomments/'+this.id+'?pageindex='+pageindex;

        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            Toast(body.message);
            return;
          }
          this.list = body.message;
        })
      }
    }
  }
</script>

<style scoped>
  .postCom, .list {
    padding: 0 5px;
  }
  .postCom button {
    width: 100%;
    height: 40px;
    border: 0;
    background-color: #26a2ff;
    color: #fff;
  }
  .list {
    margin-top: 20px;
  }
  .list dt {
    height: 40px;
    line-height: 40px;
    background-color: #ccc;
  }
</style>